<template>
	<view class="container border-10 task-container">
		<view class="task-header-container border-10">
			<view class="title">每日任务</view>
			<view class="subtitle">完成任务获得额外奖励</view>
		</view>
		<view class="task">
			<image class="arrow-right" src="/static/image/task/VIP.png"></image>
			<view class="infoscontainer">
				<view class="info">
					<text class="title">会员特权</text>
				</view>
				<view class="expebar">
					<view class="valua">不限次数,免广告,尊贵的VIP标识</view>
				</view>
			</view>
			<button class="cu-btn round bg-blue shadow" @click="keypay()">
				<text>去开通</text>
			</button>
		</view>
		<view class="task">
			<view class="infoscontainer">
				<view class="info">
					<view class="tag">Hot</view>
					<text class="title">邀请新用户</text>
				</view>
				<view class="expebar">
					<view class="exp">U P</view>
					<view class="value"> 邀请一人奖励{{sysConfig.sysConfig.yqNumber}}次</view>
				</view>
			</view>
			<button class="cu-btn round bg-blue shadow" openType="share">
				<text>去邀请</text>
			</button>
		</view>

		<view class="task">
			<view class="infoscontainer">
				<view class="info">
					<view class="tag1">每日</view>
					<text class="title">每日签到</text>
				</view>
				<view class="expebar">
					<view class="exp">U P</view>
					<view class="value">每日签到奖励{{sysConfig.sysConfig.qdNumber}}次</view>
				</view>
			</view>
			<button @click="qd()" class="cu-btn round bg-blue shadow" v-if="!isSignIn">
				<text>去签到</text>
			</button>
			<button bindtap="last" class="cu-btn round bg-orange shadow" v-else>
				<text>已签到</text>
			</button>
		</view>
		
		<view class="task">
			<view class="infoscontainer">
				<view class="info">
					<view class="tag1">广告</view>
					<text class="title">看广告获取次数</text>
				</view>
				<view class="expebar">
					<view class="exp">U P</view>
					<view class="value">每看一个广告奖励1次</view>
				</view>
			</view>
			<button @click="lookAd()" class="cu-btn round bg-blue shadow">
				<text>看广告</text>
			</button>
		</view>
		

		<view class="task">
			<view class="infoscontainer">
				<view class="info">
					<view class="tag7">新人</view>
					<text class="title">新人福利</text>
				</view>
				<view class="expebar">
					<view class="exp">U P</view>
					<view class="value">首次登陆赠送{{sysConfig.sysConfig.initialNumber}}次</view>
				</view>
			</view>
			<button class="cu-btn round bg-orange shadow">
				<text>已完成</text>
			</button>
		</view>
		<ad-custom v-if="sysConfig.sysConfig.spAd" :unit-id="sysConfig.sysConfig.spAd" bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>
		
		
		<u-toast ref="uToast"></u-toast>
	</view>

</template>

<script>
	let videoAd = null
	import {
		signIn,adAddNumber
	} from "@/api/api.js"
	import config from '@/config'
	export default {
		data() {
			return {
				sysConfig: uni.getStorageSync("appUser"),
				isSignIn:false,
				userName: config.userName,
			}
		},
		// 分享好友配置
		onShareAppMessage(res) {
			var that = this;
			if (res.from === 'button') { // 来自页面内分享按钮
			}
			return {
				title: this.sysConfig.sysConfig.fxTitle,
				imageUrl: this.sysConfig.sysConfig.fxUrl,
				path: 'pages/index?userid='+this.sysConfig.userId,
			}
		},
		onLoad() {
			var that = this
			if (wx.createRewardedVideoAd) {
			  videoAd = wx.createRewardedVideoAd({
			    adUnitId: this.sysConfig.sysConfig.jlAd
			  })
			  videoAd.onLoad(() => {})
			  videoAd.onError((err) => {
			    console.error('激励视频光告加载失败', err)
			  })
			  videoAd.onClose((res) => {
				  if (res && res.isEnded) {
				  	that.openYse()
				  } else {
				  	//that.openYse()
				  }
			  })
			}
			// var signInTime = new Date(this.sysConfig.signInTime);
			// if (new Date().toDateString() === signInTime.toDateString()) {
			//     this.isSignIn = true
			// } else {
			//     this.isSignIn = false
			// }
			
		},
		methods: {
			openYse(){
				var that = this
				adAddNumber({
					userId: this.sysConfig.userId
				}).then(response => {
					that.$refs.uToast.show({
						type: 'success',
						title: '',
						message: "╮(๑•́ ₃•̀๑)╭ 次数 +1 ",
						icon: false
					})
				})
			},
			lookAd(){
				if (videoAd) {
				  videoAd.show().catch(() => {
				    // 失败重试
				    videoAd.load()
				      .then(() => videoAd.show())
				      .catch(err => {
				        console.error('激励视频 广告显示失败', err)
				      })
				  })
				}
			},
			keypay(){
				this.$tab.navigateTo("/pages/task/keypay")
			},
			qd() {
				var that = this
				signIn({
					userId: this.sysConfig.userId,
					userName: this.userName
				}).then(response => {
					that.$refs.uToast.show({
						type: 'success',
						title: '',
						message: "╮(๑•́ ₃•̀๑)╭ 签到成功 ",
						icon: false
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #eee;
	}

	.arrow-right {
		height: 90rpx;
		margin-right: -20rpx;
		width: 90rpx;
	}

	.valua {
		color: #ee7410;
	}

	.ad {
		margin: auto;
		width: 95%;
	}

	.task-header-container {
		display: flex;
		flex-direction: column;
		border-radius: 6px;
		padding: 12px;
		margin: 5rpx 0 0 15rpx;
	}

	.task-header-container .title {
		font-size: 20px;
		color: #222;
		font-weight: 500;
	}

	.task-header-container .subtitle {
		font-size: 12px;
		color: #47494b;
	}

	.task-container .task {
		background: #fff;
		border-radius: 6px;
		padding: 12px;
		justify-content: space-between;
		margin: 0 15rpx 10px;
	}

	.task-container .infoscontainer .info,
	.task-container .task {
		display: flex;
		align-items: center;
	}

	.task-container .infoscontainer .info {
		margin-bottom: 6px;
	}

	.task-container .infoscontainer .tag {
		background-image: linear-gradient(135deg, #fb6c4e, #f94b45);
	}

	.task-container .infoscontainer .tag,
	.task-container .infoscontainer .tag1 {
		font-size: 11px;
		border-radius: 4px;
		padding: 1px 4px;
		color: #fff;
		box-shadow: 2px 2px 2px 1px rgba(249, 75, 69, .2);
		margin-right: 6px;
	}

	.task-container .infoscontainer .tag,
	.task-container .infoscontainer .tag7 {
		font-size: 11px;
		border-radius: 4px;
		padding: 1px 4px;
		color: #fff;
		box-shadow: 2px 2px 2px 1px rgba(249, 75, 69, .2);
		margin-right: 6px;
	}

	.task-container .infoscontainer .tag1 {
		background-image: linear-gradient(135deg, #fb6132, #ff9924);
	}

	.task-container .infoscontainer .tag7 {
		background-image: linear-gradient(135deg, #4393fc, #4ac0fc);
	}

	.task-container .infoscontainer .title {
		font-size: 15px;
		font-weight: 500;
		color: #222;
	}

	.task-container .infoscontainer .expebar {
		display: flex;
		align-items: center;
	}

	.task-container .infoscontainer .expebar .exp {
		font-size: 8px;
		border: 2px solid #5baff7;
		border-radius: 50px;
		color: #5baff7;
		font-weight: 600;
		padding: 0 2px;
		background-color: #ddf1fd;
		margin-right: 4px;
	}

	.task-container .infoscontainer .expebar .value {
		color: #717376;
		font-size: 12px;
	}

	.task-container .button {
		display: flex;
		align-items: center;
		font-size: 13px;
		border-radius: 50px;
		white-space: nowrap;
		box-sizing: border-box;
		padding: 5px 14px;
		background: linear-gradient(135deg, #ffbd00, #ffd000);
		color: #222;
		font-weight: 500;
		margin: 0;
		border: 0;
		outline: none;
	}

	.task-container .button.highlight {
		background: linear-gradient(90deg, #4393fc, #4ac0fc);
		color: #fff;
	}

	.task-container .button.done {
		background: #f6f7f9;
		color: #717376;
	}

	.task-container .button::after {
		border: 0;
	}

	.task-container .button text {
		line-height: 1.4em;
	}

	.task-container .taskItem {
		padding-bottom: 15px;
		border-bottom: 1rpx solid #fff;
	}

	.task-container .taskItem .mainP {
		display: flex;
		margin-bottom: 14px;
	}

	.task-container .taskItem .imgWrap {
		margin-right: 20rpx;
	}
</style>